import React, { memo, useCallback, useEffect, useRef, useState } from 'react';

import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getTopBannersAction } from "../../store/actionCreators";

import { Carousel } from 'antd';

import { BannerWrapper, BannerLeft, BannerRight, BannerControl } from "./style";

const TopBanner = memo(() => {
  // 3.获取dom；
  const bannerRef = useRef();
  // 5.在组件中保留状态；
  const [current, setCurrent] = useState(0);

  /** redux中Hooks使用；
   *    useSelector本身存在的问题，内部使用严格(===)进行比较的，因为这里是回调函数返回的对象，所以
   * 每一次都会返回一个最新的对象，这样会导致数据更新组件会重新渲染造成一个性能浪费。
   * 解决：可以穿入第二个参数
   * 
   * 参数一：回调函数返回一个对象，解构出想要的数据。
   * 参数二：shallowEqual(进行浅层比较，优化性能)。
   * 
   * 1.因为reducer已经改成ImMutable对象了所以使用get;
   * 
   * 2.合并reducer时使用了redux-immutable里的combineReducers，所以使用get获取recommend；
   * 
   */
  const { topBanners = [] } = useSelector(state => ({
    // topBanners: state.recommend.topBanners
    // topBanners: state.recommend.get("topBanners")

    // topBanners: state.get("recommend").get("topBanners")
    topBanners: state.getIn(["recommend", "topBanners"])
  }), shallowEqual);
  const dispatch = useDispatch();


  useEffect(() => {
    dispatch(getTopBannersAction());
  }, [dispatch]);

  //4.切换前的回调，纪录当前播放图片，实现背景毛玻璃(高斯模糊)；
  const bannerBeforeChange = useCallback((from, to) => {
    setCurrent(to)
  }, [])

  //6.获取当前播放的img，传给容器；
  const bgImage = topBanners[current] && (topBanners[current].imageUrl + "?imageView&blur=40x20");

  return (
    <BannerWrapper bgImage={bgImage}>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel 
            effect="fade" 
            autoplay 
            ref={bannerRef} 
            beforeChange={bannerBeforeChange}
          >
            {
              topBanners.map((item) => {
                return (
                  <div className="banner-item" key={item.imageUrl}>
                    <img className="image" src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                )
              })
            }
          </Carousel>
        </BannerLeft>

        <BannerRight></BannerRight>

        <BannerControl>
          <button className="btn left" onClick={e => bannerRef.current.prev()}></button>
          <button className="btn right" onClick={e => bannerRef.current.next()}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
})

export default TopBanner